<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	
.mystyle{
		width: 500PX;
		height: 50PX;
		padding: 15PX;
		border: 1PX solid black;
	}
.anotherClass{
		background-color: coral;
		color: white;
	}
.thirdClass{
		text-transform: uppercase;
		text-align: center;
		font-size: 25px;
	}
	
.dnone{display: none;}
.dhidden{visibility: hidden;}
	
</style>
<button onclick="changeClass(mydiv)">快！点击我</button>

<button onclick="noneDiv(mydiv)">消失</button>
<button onclick="hideDiv(mydiv)">隐藏</button>

<div id="mydiv" class="mystyle">我是一个div元素</div>

<div>这是第二个div</div>

</head>
<body>
<script>
	//直来直去的JavaScript 找到你控制你 哈哈哈哈~
	//显示颜色
	function changeClass(div){
		div.classList.toggle('anotherClass');
		div.classList.toggle('thirdClass');
	}
	//隐藏
	function noneDiv(div){
		//div.style.display="none";
		div.classList.toggle('dnone');
	}
	function hideDiv(div){
		//div.style.visibility="hidden";
		div.classList.toggle('dhidden');
	}
	
	// function hideDiv(div){
	// 	div.style.display="none";
	// }
	
	
</script>
</body>
</html>
